<!DOCTYPE html>
<meta charset="utf-8">
<html>
	<head>
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/one">菜单一</router-link>
			<router-link to="/two">菜单二</router-link>
			<router-link to="/three">菜单三</router-link>
			<router-view></router-view>
		</div>
		<script type="text/javascript">
			//定义不同的组件
			var one = {
				template: '<p>我是菜单一的内容</p>'
			};
			var two = {
				template: '<p>我是菜单二的内容</p>'
			};
			var three = {
				template: '<p>我是菜单三的内容</p>'
			};

			// 定义路径
			var routes = [{
					path: '/',
					redirect: '/one'
				}, // 这个表示会默认渲染
				{
					path: '/one',
					component: one
				},
				{
					path: '/two',
					component: two
				},
				{
					path: '/three',
					component: three
				}
			];

			//定义路由
			var router = new VueRouter({
				routes: routes
			})

			//绑定路由
			new Vue({
				el: '#app',
				router
			})
		</script>
	</body>
</html>
